<template>
    <div>
    <p>detail</p>
    <div>
        <div class="tabs-box">
            <block v-for="(index,item) of items" :key="index">
            <!-- currentIndex == index?'selected':'' -->
                <div :class="tabs-item "
                @click="handleItem(index)">
                {{item}}
                </div>
            </block>
        </div>
        <!-- <div class="product-detail-box">
            <div hidden="{{currentIndex!=0}}">detail</div>
            <div hidden="{{currentIndex!=1}}">param</div>
            <div hidden="{{currentIndex!=2}}">sale</div>
        </div> -->
    </div>

    </div>
</template>

<script>
    export default {
        mounted() {
            console.log(this.$route.query)  //get 问号后面
            //动态路由 ctx.request.params  /id
            //post     ctx.request.body
        },
        methods: {
            handleItem(event){
                var index = event.currentTarget.dataset.index;
                this.setData({
                    currentIndex:index
                })
            }
        },
    }
</script>

<style scoped>
.selected {
color: rgba(171, 149, 109, .8);
border-bottom: 2px solid rgba(171, 149, 109, .8);
}

.tabs-box{
display: flex;
height: 50rpx;
}
.tabs-item{
flex: 1;
text-align: center;
}
</style>